<template>
    <div>
        <h2>WORD转PDF</h2>
        <el-row style="text-align: left;margin-left: 90px;">
            <input v-show="false" ref="fileRef" type="file" @change="uploadFileWithClear($event)"/>
            <el-button type="primary" v-loading.fullscreen.lock="fullscreenLoading" @click="upload()">上传文件</el-button>
            <!-- <el-button type="danger" v-loading.fullscreen.lock="fullscreenLoading" @click="delAll()">删除选中</el-button>
            <el-button type="success" v-loading.fullscreen.lock="fullscreenLoading" @click="convertAll()">开始转换</el-button> -->
        </el-row>
        <el-table style="width: 85%;margin: 0 auto;"  
        :data="tableData"
        @selection-change="handleSelectionChange">
             <el-table-column
                type="selection"
                width="55">
            </el-table-column>

            <el-table-column 
            prop="filename"
            label="文件">
            </el-table-column>

            <el-table-column
                prop="size"
                label="大小"
                width="180">
            </el-table-column>

            <el-table-column
                prop="status"
                label="状态"
                width="180">
                <template slot-scope="scope">
                    <el-tag  v-if="scope.row.status == 1">待转换</el-tag>
                    <el-tag  v-if="scope.row.status == 2" type="success">转换成功</el-tag>
                    <el-tag  v-if="scope.row.status == 3" type="danger">转换失败</el-tag>
                </template>

            </el-table-column>

            <el-table-column
                prop=""
                label="操作"
                width="300"
                >
                 <template slot-scope="scope">
                    <a v-if="scope.row.status == 1" class="el-icon-share a_link" title="转换" @click="convert(scope.row)"></a>
                    <a v-if="scope.row.status == 2" class="el-icon-download a_link" title="下载" @click="download(scope.row)"></a>
                    <a class="el-icon-delete a_link" title="删除" @click="del(scope.row)"></a>
                 </template>

                 <!-- <i class="el-icon-delete" @click="del(scope.row)"></i> -->
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import {uploadFile, del, convert, download} from '../utils/api'
    export default {
        data(){
            return{
                tableData:[], 
                multipleSelection: [],
                fullscreenLoading: false,
                convertType: 1,
                loadingFlag: null
            }
        },
        methods:{
            handleSelectionChange(val){
                this.multipleSelection = val
            },
            download(row){
                window.open("/file/download/"+row.id);
                // download(row.id).then((res)=>{
                //     console.log(res);
                //     const blob = new Blob([res])
                //      //对于标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
                //     //IE10以上支持blob但是依然不支持download
                //     if ('download' in document.createElement('a')) { 
                //         //支持a标签download的浏览器
                //         const link = document.createElement('a')//创建a标签
                //         link.download = 'fileName.pdf'//a标签添加属性
                //         link.style.display = 'none'
                //         link.href = URL.createObjectURL(blob)
                //         document.body.appendChild(link)
                //         link.click()//执行下载
                //         URL.revokeObjectURL(link.href) //释放url
                //         document.body.removeChild(link)//释放标签
                    
                //     }else{
                //         navigator.msSaveBlob(blob, fileName)
                //     }
                // })
            },
            del(row){
                del(row.id).then((res)=>{
                    if(res.success){
                         let index= this.tableData.findIndex((item)=>{
                            return item.id==row.id
                        })
                        this.tableData.splice(index,1);
                    }else{
                        this.$message.error(res.errMsg)
                    }

                })
               
            },
            convert(row){
                let index= this.tableData.findIndex((item)=>{
                    return item.id==row.id
                })
                let convertRow = this.tableData[index];
                
                this.loadingFlag = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });

                convert(row.id).then((res)=>{
                    if(res.success){
                        convertRow.status = "2"
                        this.tableData.splice(index, 1, convertRow)
                    }else{
                        this.$message.error(res.errMsg);
                        convertRow.status = "3"
                        this.tableData.splice(index, 1, convertRow)
                    }
                })
                
                setTimeout(() => {
                    this.loadingFlag.close()
                }, 2000);
            },
            upload(){
                this.$refs.fileRef.dispatchEvent(new MouseEvent('click'))  //设置触发事件
            },
            uploadFileWithClear(event) {
                this.uploadFile(event);
                this.$refs.fileRef.value = "";  //处理完之后这里 清空当前file输入，不然连续点击会发现没有效果
            },
            uploadFile(event) {
                let files = event.target.files
                console.log("files",files)
                console.log("files[0]",files[0])
                if(files.length<=0){
                    return
                }

                if(!/\.(doc|docx)$/.test(files[0].name.toLowerCase())){
                    this.$message({
                        type: "error",
                        message: "上传格式不正确，请上传word文件",
                    });
	                return ;
                }

                var formdata = new FormData();
                formdata.append('file',files[0]);
                formdata.append('convertType',this.convertType);
                console.log(formdata);

                uploadFile(formdata).then((res)=>{
                    if(res.success){
                        let resdata = res.data;
                        let file = {
                            id: resdata.id,
                            filename: resdata.originalName, 
                            size: resdata.originalSize,
                            status: "1",
                        }
                        this.tableData.push(file);

                    }else{
                        this.$message.error(res.errMsg);
                    }
                })

            },
            delAll(){
                if(this.multipleSelection.length < 1){
                    alert("请选择选中要删除的行数据")
                    return
                }
                this.fullscreenLoading = true;
                for(var i = 0; i< this.multipleSelection.length; i++){
                    let id = this.multipleSelection[i].id;
                    let index= this.tableData.findIndex(item=>{
                        if(item.id==id){
                            return true
                        }
                    })
                    this.tableData.splice(index,1);
                }
                this.fullscreenLoading = false;
            },
            convertAll(){
                if(this.multipleSelection.length < 1){
                    alert("请选择选中要转换的行数据")
                }else{
                    this.fullscreenLoading = true;
                    for(var i = 0; i< this.multipleSelection.length; i++){
                        let id = this.multipleSelection[i].id;
                        let index = this.tableData.findIndex((item)=>{
                            return item.id==id
                        })
                        let convertRow = this.tableData[index]
                        convertRow.status = "2";
                        this.tableData.splice(index, 1, convertRow)
                    }
                    this.fullscreenLoading = false;
                }
               
            },
        }
    }
</script>

<style lang="scss" scoped>
.a_link{
    margin-right:20px;
    cursor:pointer;
}
</style>